<template>
	<div style="padding-bottom:20px;">
		<div class="yy" v-for="(item,i) in productItems" :key="i">
			<img :src="APIDomainName + item.picture" style="width: 100%;" class="tp1" @click="onDetail(item.id)">
			<div style="display: flex;align-items: center;width: 28rem;justify-content: space-between;">
				<div style="margin-left: 1rem;" @click="onDetail(item.id)">
					<div style="margin-top: 0.3rem;font-size: 22px;font-weight: bold; ">{{item.title}}</div>
					<div style="display: flex; font-size: 16px; margin-top: 0.5rem;">
						{{item.label}}
					</div>
				</div>
				<div v-if="is_checked[i]">
					<van-button plain hairline round color="#7F8386" size="large" @click="onClickCancel(item.id)"
						style="width: 100%;height: 40px;width: 7rem;margin-top: 0.5rem;background-color: #F4F8FB;font-weight: bold; ">
						已预约</van-button>
				</div>
				<div v-else>
					<van-button round color="#01CBE2" size="large" @click="onClickAdd(item.id)"
						style="width: 100%;height: 40px;width: 7rem;margin-top: 0.5rem;">预约</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as Tools from "@/utils/tools.js"
	import {
		appointmentListAPI,
		addAppointmentAPI,
		deleteAppointmentAPI,
		appointmentSearchListAPI
	} from '@/api/appointment.js';
	export default {
		data() {
			return {
				productItems: [],
				is_checked: [],
			}
		},
		created() {
			this.getList();
			this.onSearch();
		},
		methods: {
			onSearch() {
				this.is_checked = [];
				this.is_checked.length=this.productItems.length;
				appointmentSearchListAPI().then((result) => {
					result.data.forEach(item => {
						if (item.is_checked == 0) {
							item.is_checked = false;
						} else if (item.is_checked == 1) {
							item.is_checked = true;
						}
						this.is_checked[item.id - 1] = item.is_checked;
					}); //数据的遍历
					console.log(this.is_checked);
				});
				for (var i = 0; i < this.is_checked.length; i++) {
					if (this.is_checked[i] == null) {
						this.is_checked[i] = false;
					}
				}
				this.getList();
			},
			getList() {
				appointmentListAPI().then((result) => {
					console.log(result);
					this.productItems = result.data;
				});
			},
			onDetail(id) {
				this.$router.push({
					name: 'appointmentDetail',
					params: {
						id
					}
				});
			},
			onClickAdd(id) {
				let data = {
					appointment_id: id,
				}
				//2.使用封装后的接口,注意：接口有参数
				addAppointmentAPI(data).then(result => {
					this.$toast(result.msg);
				}).catch(() => {});
				this.is_checked[id-1]=true;
				this.getList();
			},
			onClickCancel(id) {
				let ids = id;
				deleteAppointmentAPI(ids).then(result => {
					this.$toast(result.msg);
				}).catch(() => {});
				this.is_checked[id-1]=false;
				this.getList();
			},
		},
	}
</script>

<style>
	.yy {
		width: 30rem;
		height: 20rem;
		background-color: #FFFFFF;
		border-radius: 1rem;
		margin: 1rem auto 0;
		box-shadow: 0px 2px 10px #C8C9CC;
	}



	.tp1 {
		width: 30rem;
		height: 15rem;
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
	}
</style>
